<template>
    <div class="contract">
        <div class="filter-container">
            <el-input
                prefix-icon="el-icon-search"
                v-model="contractQuery.name"
                @input="searchInput"
                clearable
                placeholder="请输入姓名"
                style="width: 200px;"
                class="filter-item"
            />
            <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px">
                搜索
            </el-button>
        </div>

        <el-table :data="tableData" ref="table" height="70vh" style="width: 100%;">
            <el-table-column type="index" label="序号" width="200"></el-table-column>
            <el-table-column prop="loan_name" label="姓名" width="260"></el-table-column>
            <el-table-column prop="loan_card" label="身份证" width="300"></el-table-column>
            <el-table-column prop="file_path" label="合同状态" width="200">
                <template v-slot="{ row }">
                    <el-tag :type="row.file_path | types">{{ row.file_path | statusType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template v-slot="{ row }">
                    <el-button size="mini" type="primary" @click="produce(row)" :disabled="row.file_path != null">生成合同</el-button>
                    <el-button size="mini" type="success" @click="down(row)" :disabled="row.file_path == null">下载合同</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <Pagination :current-page.sync="contractQuery.pageNo" :page-size.sync="contractQuery.pageSize" :total="rows" @getList="getList"> </Pagination>
    </div>
</template>

<script>
import httpRequest from '@/api/http.js'
import Pagination from '@/components/pagination'
import token from '@/utils/token.js'

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            contractQuery: {
                pageNo: 1,
                pageSize: 10,
                name: '',
            },
            rows: 1,
            tableData: [],
            list: [],
            url: 'http://139.196.42.209:6113',
        }
    },
    methods: {
        getList() {
            httpRequest.contractList(this.contractQuery).then((res) => {
                let { data, rows } = res.data.data
                this.rows = rows
                // this.tableData = data;
                this.list = data
                this.searchInput()
            })
        },
        searchInput() {
            this.contractQuery.pageNo = 1
            if (this.contractQuery.name == '') {
                this.tableData = this.list
            } else {
                this.tableData = this.list.filter((v) => v.loan_name.includes(this.contractQuery.name))
            }
        },
        produce(row) {
            this.$confirm('是否生成合同', '合同生成', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    httpRequest.createFile({ id: row.id }).then((res) => {
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: '合同成功生成',
                            duration: 2000,
                            showClose: true,
                        })
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '合同生成已取消',
                        duration: 2000,
                        showClose: true,
                    })
                })
        },
        down(row) {
            this.$confirm('是否下载合同', '合同下载', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    httpRequest.downloadFile({ id: row.id }).then((res) => {
                        // 获取到下载地址
                        this.downloadUrlFile(this.url + res.data.url)
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '合同下载已取消',
                        duration: 2000,
                        showClose: true,
                    })
                })
        },
        downloadUrlFile(url) {
            // const xhr = new XMLHttpRequest()
            // xhr.open('GET', url, true)
            // xhr.responseType = 'blob' // 响应类型 -- blob字节流
            // xhr.setRequestHeader('token', token.getSessionToken()) // 传入token
            // xhr.onload = () => {
            //     if (xhr.status === 200) {
            //         // 将获取到的blob数据保存
            //         let filename = xhr.responseURL.substring(xhr.responseURL.lastIndexOf('/') + 1)
            //         this.saveAs(filename, xhr.response)
            //     }
            // }
            // xhr.send()
            httpRequest
                .downBlob(url)
                .then((res) => {
                    console.log('asd', res)
                    let url = window.URL.createObjectURL(new Blob([res]))
                    let link = document.createElement('a')
                    link.href = url
                    let timestamp = new Date().getTime()
                    link.download = timestamp + '.docx'
                    link.click()
                })
        },
        // saveAs(name, data) {
        //     let urlObject = window.URL
        //     let export_blob = new Blob([data])
        //     let save_link = document.createElement('a')
        //     save_link.href = urlObject.createObjectURL(export_blob) // 生成File对象或Blob对象的URL字符串
        //     save_link.download = name
        //     save_link.click() // 触发a标签
        //     this.$message({
        //         type: 'success',
        //         message: '合同下载成功',
        //         duration: 2000,
        //         showClose: true,
        //     })
        // },
    },
    mounted() {
        this.getList()
    },
    filters: {
        statusType(data) {
            switch (data) {
                case null:
                    return '未生成合同'
                default:
                    return '已生成合同'
            }
        },
        types(data) {
            switch (data) {
                case null:
                    return ''
                default:
                    return 'success'
            }
        },
    },
}
</script>
